<template>
  <view class="container">
    <!-- #ifdef MP-WEIXIN-->
    <view class="avatar ">
      <u-avatar :src="authheadnickname.wxheadurl" size="100"> </u-avatar>
    </view>

    <view class="nickname">
      {{ authheadnickname.wxnickname ? authheadnickname.wxnickname : "请登录授权"}}
    </view>

    <!-- #endif -->

    <view class="title">
      <text>请验证并绑定你的账号</text>
    </view>

    <!-- 表单 -->
    <u--form :model="admin" :rules="rules" ref="bind">
      <!-- 账号 -->
      <!-- 账号 -->
      <u-form-item prop="username" class="item">
        <u--input v-model="admin.username" placeholder="请输入账号">
        </u--input>
      </u-form-item>

      <!-- 密码 -->
      <u-form-item prop="password">
        <u--input v-model="admin.password" placeholder="请输入账号密码" type="password">
        </u--input>
      </u-form-item>

      <u-button text="绑定账号" icon="pushpin" size="small" type="warning" formType="submit" :customStyle="btnStyle"
        @click="bind" />
    </u--form>


    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
	
<script>
export default {
  //onLoad === created
  onLoad(option) {

    // 获取后端跳转地址商的openid
    var openid = option.openid ? option.openid : "";

    //如果为空就说明openid没有返回来
    if (!openid) {
      //重新授权认证,返回上一个界面
      this.$refs.notice.show({
        type: "error",
        message: "授权openid获取失败，请重新授权",
        duration: 2500,
        complete: () => {
          uni.$u.route({
            type: "navigateBack", //后退类型
            delta: 1, //后退一层界面
          });

          return false;
        },
      });

      return false;
    } else {
      this.admin.openid = openid;
    }
  },
  onShow()
  {
    var usernicknamelist = uni.getStorageSync("authinfo")
    //如果有登录信息的时候才去覆盖 data数据
    if (usernicknamelist && JSON.stringify(usernicknamelist) != "{}") {
      this.authheadnickname = usernicknamelist;
    }
  },
  onReady() {
    //为了兼容小程序  设置表单的验证规则
    this.$refs.bind.setRules(this.rules);
  },
  data() {
    return {
      qxrouter: [],
      SystemInfo: [],
      authheadnickname:{},
      admin: {
        openid: "",
        username: "",
        password: "",
      },
      btnStyle: {
        width: "auto",
        height: "3em",
        margin: "15px 0px",
      },
      rules: {
        ipAddress:"",
        username: {
          type: "string",
          required: true,
          message: "请输入账号",
          trigger: ["blur", "change"], //触发条件
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"], //触发条件
        },
      },
    };
  },
  methods: {
    async bind() {
      //判断表单元素是否有通过的验证规则
      this.$refs.bind
        .validate()
        .then(async (res) => {
          //调用接口
          var result = await this.$u.api.admin.bind(this.admin);




          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                //保存登录信息到本地存储 同步保存方法

                this.auth = result.data
                let list = result.data.grouplist_text

                let keysArray = Object.values(list);

                keysArray.forEach((item, index) => {
                  let a = "/" + item;
                  this.qxrouter.push(a)
                });


                uni.setStorageSync("auth", result.data);

                uni.setStorageSync("qxrouter", this.qxrouter);

                this.getSystemInfo()
                this.getIPAddress()

                // 所有权限节点
                // this.$u.route.check()

                //跳转，关闭掉所有界面，在重新打开一个界面
                uni.$u.route({
                  type: "reLaunch",
                  url: result.url,
                });


                return false;
              },
            });
          } else {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
            });
            return false;
          }
        })
        .catch((error) => {
          uni.$u.toast("效验失败");
        });
    },
    getSystemInfo() {
            uni.getSystemInfo({
                success: (res) => {
                    this.systemInfo = res;
                    uni.setStorageSync("model",this.systemInfo.model)

                    console.log(`手机型号为 ${this.systemInfo.model}`);
                }
            }
            )
        },
        async getIPAddress() {
            uni.request({
                url: 'https://ipapi.co/json/',
                success: (res) => {
                    if (res.data.ip && typeof res.data.ip === 'string') {
                        this.ipAddress = res.data.ip;
                        uni.setStorageSync("ipAddress",this.ipAddress)
                    }
                }
            });

        },
  }

}
</script>
	
<style>
.container {
  height: 100%;
  margin: 0 80rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 20px;
}

.img-captcha {
  display: block !important;
}

.btn-submit {
  margin-top: 40rpx !important;
}

.href-bindmobile {
  margin-top: 40rpx;
  text-align: center;
  font-size: 14px;
  color: var(--color-primary);
}

.u-form .u-form-item__body__right__message {
  margin-left: 0px !important;
}
</style>
	